<div class="main-container">
  <nz-card [nzBordered]="false">
    <form nz-form [nzLayout]="'inline'" [formGroup]="searchForm">
      <nz-form-item>
        <nz-form-label>日期</nz-form-label>
        <nz-form-control>
          <nz-range-picker  formControlName="rangePickerTime"></nz-range-picker>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label>交班人</nz-form-label>
        <nz-form-control>
          <nz-select nzPlaceHolder="请选择" formControlName="fromStaff">
            <nz-option *ngFor="let item of peopleOption" [nzValue]="item.id" [nzLabel]="item.name"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label>接班人</nz-form-label>
        <nz-form-control>
          <nz-select nzPlaceHolder="请选择" formControlName="toStaff">
            <nz-option *ngFor="let item of peopleOption" [nzValue]="item.id" [nzLabel]="item.name"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label>关键词</nz-form-label>
        <nz-form-control>
          <input formControlName="keyword" nz-input placeholder="关键词"/>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control>
          <button nz-button nzType="primary" (click)="queryInfo()"><i nz-icon nzType="search"></i>搜索</button>
          <button nz-button nzType="default" class="btn-ora" (click)="onAdd()"><i nz-icon nzType="plus"></i>新增</button>
          <button nz-button nzType="default" (click)="exportDocx()"><i nz-icon nzType="download"
              nzTheme="outline"></i>导出</button>
        </nz-form-control>
      </nz-form-item>
    </form>
  </nz-card>
  <div nz-row nzGutter="12" style="margin-top: 10px;">
    <div nz-col class="gutter-row left" nzSpan="8">
      <div class="gutter-box">
        <nz-card [nzBordered]="false" style="height:calc(100vh - 190px);margin-left: 10px;overflow: auto">
          <div class="table-wrap">
            <nz-table
              #dataTable
              nzShowSizeChanger
              nzBordered
              nzSize="middle"
              [nzLoading]="loading"
              [nzData]="tableData"
              [nzTotal]="total"
              [(nzPageIndex)]="pageNum"
              [(nzPageSize)]="pageSize"
              (nzPageIndexChange)="queryInfo()"
            >
              <thead>
              <tr>
                <th>日期/时间</th>
                <th>早班</th>
                <th>中班</th>
                <th>晚班</th>
              </tr>
              </thead>
              <tbody>
              <tr *ngFor="let data of dataTable.data;let i = index"
                  (click)="rowSelect(data)"
                  [ngClass]="{'rowSelected':selectedId == data.date}"
              >
                <td><span style="color: #307BFA">{{ data.changeDate | date: 'MM月dd日' }}</span></td>
                <td>{{ data.toStaffNameList[0] || '' }}</td>
                <td>{{ data.toStaffNameList[1] || '' }}</td>
                <td>{{ data.toStaffNameList[2] || '' }}</td>
              </tr>
              </tbody>
            </nz-table>
          </div>

        </nz-card>
      </div>

    </div>

    <div nz-col class="gutter-row" nzSpan="16">
      <div class="title">交接详情</div>
      <div class="detail">
        <div class="item-wrap" *ngFor="let item of detailList" [ngClass]="{'cardSelected':selectedId == item.id}">
          <div class="base-info">
            <div> <i nz-icon [nzType]="'user'" class="icon"></i>
              <b>交班人：</b>
              {{item.fromStaffName}}
            </div>
            <div> <i nz-icon [nzType]="'user'" class="icon"></i>
              <b>接班人：</b>
              {{item.toStaffName}}
            </div>
            <div> <i nz-icon nzType="clock-circle" class="icon"></i>
              <b>交接班时间：</b>
              {{item.changeDate | date: 'yyyy年MM月dd日 HH:mm:ss'}}
            </div>
          </div>
          <div class="divider"></div>
          <div>
            <div class="title-text">交接事宜：</div>
            <p class="content-text" [innerHTML]="item.content"></p>
          </div>
          <div>
            <div class="title-text">遗留问题及建议：</div>
            <p class="content-text">{{item.advice}}</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <nz-modal [nzBodyStyle]="nzBodyStyle" nzWidth="700" [(nzVisible)]="modalShow" [nzTitle]="modalTitle"
            (nzOnCancel)="onCancel()" (nzOnOk)="onConfirm()">
    <form nz-form [formGroup]="form">
      <div nz-row [nzGutter]="24">
        <!--<div nz-col [nzSpan]="12">
          <nz-form-item nzFlex>
            <nz-form-label [nzSm]="8" [nzXs]="24">交班人</nz-form-label>
            <nz-form-control>
              <nz-select nzPlaceHolder="请选择" formControlName="fromStaff">
                <nz-option *ngFor="let item of peopleOption" [nzValue]="item.id" [nzLabel]="item.name"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
        </div>-->
        <div nz-col [nzSpan]="12">
          <nz-form-item nzFlex>
            <nz-form-label [nzSm]="8" [nzXs]="24">接班人</nz-form-label>
            <nz-form-control>
              <nz-select nzPlaceHolder="请选择" formControlName="toStaff">
                <nz-option *ngFor="let item of peopleOption" [nzValue]="item.id" [nzLabel]="item.name"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col [nzSpan]="12">
          <nz-form-item nzFlex>
            <nz-form-label [nzSm]="8" [nzXs]="24">交接班时间</nz-form-label>
            <nz-form-control>
              <nz-date-picker nzShowTime [nzFormat]="'yyyy-MM-dd HH:mm'" formControlName="changeDate"></nz-date-picker>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col [nzSpan]="24">
          <nz-form-item nzFlex>
            <nz-form-label [nzSm]="4" [nzXs]="24">交接班事宜</nz-form-label>
            <nz-form-control>
              <textarea formControlName="content" nz-input rows="6" style="width: 530px"></textarea>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col [nzSpan]="24">
          <nz-form-item nzFlex>
            <nz-form-label [nzSm]="4" [nzXs]="24">遗留问题及建议</nz-form-label>
            <nz-form-control>
              <textarea formControlName="advice" nz-input rows="2" style="width: 530px"></textarea>
            </nz-form-control>
          </nz-form-item>
        </div>
      </div>
    </form>
  </nz-modal>
</div>
